﻿@using SoNerdy.Player.Models

@{
    var mediaSet = (IEnumerable<PlayerMedia>)Model.Media;
    var renderJplayer = mediaSet.Any(x => x.MediaType == MediaType.Audio);
    var renderVideojs = mediaSet.Any(x => x.MediaType == MediaType.Video);
    if(renderJplayer) {
        Style.Require("jplayer").AtHead();
        Script.Require("jplayer");
        Script.Require("jplayer-playlist");    
    }
    
    if (renderVideojs) {    
        Style.Include("http://vjs.zencdn.net/c/video-js.css").AtHead();
        Script.Include("http://vjs.zencdn.net/c/video.js").AtHead();            
    }
}

@if (renderJplayer) {
    <!--jplayer-->
    <div id="player-part">
        <input type="hidden" class="tab-name" value="Music" />
        <p>Select a song from the list to begin listening.</p>

        <div id="jplayer"></div>

        <div id="jp_container_1" class="jp-audio ui-corner-all">
            <div class="jp-type-playlist ui-corner-all">
                <div class="jp-gui jp-interface ui-corner-all">
                    <ul class="jp-controls">
                        <li><a href="javascript:;" class="jp-previous" tabindex="1">previous</a></li>
                        <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
                        <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
                        <li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li>
                        <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
                        <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
                        <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
                        <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
                    </ul>
                    <div class="jp-progress">
                        <div class="jp-seek-bar">
                            <div class="jp-play-bar"></div>

                        </div>
                    </div>
                    <div class="jp-volume-bar">
                        <div class="jp-volume-bar-value"></div>
                    </div>
                    <div class="jp-current-time"></div>
                    <div class="jp-duration"></div>
                    <ul class="jp-toggles">
                        <li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a></li>
                        <li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off</a></li>
                        <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
                        <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
                    </ul>
                </div>
                <div class="jp-playlist ui-corner-bottom">
                    <ul>
                        <li></li>
                    </ul>                                        
                </div>
                <div class="jp-no-solution">
                    <span>Update Required</span>
                    To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
                </div>
            </div>
        </div>
    </div>
    using (Script.Foot()) {    
        <script type="text/javascript">
            $(function () {
	            new jPlayerPlaylist({
		            jPlayer: "#jplayer",
		            cssSelectorAncestor: "#jp_container_1"
		        }, [
		            @foreach(var m in mediaSet.Where(m=>m.MediaType==MediaType.Audio)) {
                        <text>
                        {
                            title: "@m.Title",</text>
                        foreach(var f in m.Files) {
                            <text>    
                                @f.ContentType: "@f.Url"
                            },
                            </text>
                        }
                    }
	            ], {
	                swfPath: "Jplayer.swf",
		            supplied: "mp3",
		            wmode: "window"
	            });
            });
        </script>
    
    }
    <!--end jplayer-->
}

<!--videojs-->
@foreach (var playerMedia in mediaSet.Where(m=>m.MediaType==MediaType.Video)) {
        
    if (!string.IsNullOrWhiteSpace(playerMedia.Title))
        {
            <h2>@playerMedia.Title</h2>
        }
        <div class="video-wrapper">
            <video id="my_video_1" class="video-js vjs-default-skin" controls
                   preload="auto" width="@playerMedia.Width" height="@playerMedia.Height" 
                   data-setup="{}">
    
                @foreach(var file in playerMedia.Files) {
                    <text> <source src="@file.Url" type="@file.ContentType"> </text>    
                }                  
            </video>
        </div>
}
<!--end videojs-->